<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>临停车辆</title>

    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/example.css"/>
    <link rel="stylesheet" href="../css/plate.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
    html,body{
            font-family: 'PingFangSC-Regular';
            width: 100%;
            height: 99%;
            background : #F5F5F9;
            color: rgba(51, 51, 51, 0.87);
            margin : 0;
            overflow-y: auto;
    }

    .weui-panel{
        top: 15px;
        border-radius: 6px;
        margin: 0px 15px 0px 15px;
    }

    .weui-panel__hd:after{
        border-bottom: none;
    }

    .weui-media-box{
        padding: 0px;
    }
    .hheader{
        display: flex;
        align-items: center;
        justify-items: center;
        padding: 10px 10px 10px 10px;
        
    }

    .order{
        width: 16px;
        height: 18px;
    }

    .weui-media-box_appmsg .weui-media-box__thumb{
        width: auto;
    }
    .title{
        color: #333333;
        margin-left: 8px;
    }

    .logo_car{
        width: 42px;
        height: 34px;
    }
    .middle{
        border: none;
       
    }

    .type_card{
        display: block;
        color: white;
        font-size: 10px;
        background-color: #00b4bb;
        padding: 3px 8px 3px 8px;
        border-radius: 5px;
        margin-top: 10px;
    }
    .weui-media-box_appmsg{
        align-items: flex-start;
        margin-top: 10px;
    }

  

    .weui-media-box__hd{
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .weui-media-box__title{
        font-weight: 600;
        font-size: 16px;
    }

    .weui-media-box__desc{
        margin-top:4px;
    }

    .park_time{
        margin-top: 10px;
        color: #333333;
    }

    .park_time>span{
        color: #0051BB;
        font-weight: 400;
    }


    button.weui-btn_plain-default{
        border: none;
    }

    button.weui-btn{
        width: auto;
        color: #BF0000;
        font-size: 16px;
        border: 1px solid;
        line-height: 24px;
        padding: 6px 36px 6px 36px;
        margin: 20px 0px;
    }

    .weui-btn{
        display:inline;
    }

    /* .weui-media-box{
        position: unset;
    } */

    .block>img{
        width: 44px;
        height: 44px;
    }

    .weui-panel__ft{
        border-top: 1px solid #E5E5E5;
        margin: 0px 10px;
        padding: 10px 0px;
    }

    .kind_card{
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
    }

    .block{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    
    .block>span{
        font-size: 12px;
        margin: 6px;
    }

    .down{
        margin-top: 10px;
        background-color: #F5F5F9;
    }
    .ad{
        width: 100%;
    }
    .tip{
        color: #333333;
        margin-top: 10px;
        font-size: 12px;
    }
    .desc{
        color: #8b8b8b;
        margin-top: 4px;
        font-size: 10px;
    }
    </style>
</head>
<body>
    <div id="main" >
        <div class="weui-panel up">
            <div class="weui-panel__hd hheader">
                <img class="order" src="../images/Order@2x.png" alt="">
                <span class="title">正在进行中的订单</span>
            </div>
            <div class="weui-panel__bd middle">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="logo_car" src="../images/car-business@2x.png" alt="">
                        <span class="type_card">临停车</span>
                    
                    </div>
                    <div class="weui-media-box__bd">
                            <h4 id="car_num" class="weui-media-box__title">苏A.12345</h4>
                            <p class="weui-media-box__desc">进场时间&nbsp;&nbsp;2019/05/20 &nbsp;&nbsp;13:25:12</p>
                            <p class="weui-media-box__desc park_time">当前停车时长<span> &nbsp;&nbsp; &nbsp;&nbsp;2小时16分钟</span></p>
                            <button id="tempcar_btn" class="weui-btn weui-btn_plain-default">临停缴费</button>
                    </div>
                </div>
            </div>
            <div class="weui-panel__ft">
                <div class="kind_card">
                    <div class="block">
                        <img src="../images/Lock-unlock@2x.png" alt="">
                        <span>锁定/解锁</span>
                    </div>
                    <div class="block">
                        <img src="../images/Storage card recharge@2x.png" alt="">
                        <span>储值卡充值</span>
                    </div>
                    <div class="block">
                        <img src="../images/Monthly renewal fee@2x.png" alt="">
                        <span>月卡续费</span>
                    </div>
                </div> 
            </div>
        </div>
        <div class="weui-panel down">
            <img class="ad" src="../images/ad-page@2x.png" alt="">
            <p class="tip">车辆锁定/解锁功能说明</p>
            <p class="desc">车辆锁定(解锁)功能，车主点击“锁定”按钮，通过平台下达限制离场指定，在车主没有点击“解锁”按钮时，出口道闸不予放行，反之放行</p>
        </div>
        
    </div>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script>

         $(function(){
            var car = window.location.href;
            var cardata = car.split("="); //截取 url中的“=”,获得“=”后面的参数  
            var car_num = decodeURI(cardata[1]); //decodeURI解码  
            console.log(car_num);
            $('#car_num').html(car_num);

            $('#tempcar_btn').click(function(){
                window.location.href = 'temporary_pay.html?car_num='+car_num;
            })
         })
    </script>
</body>
</html>